<template>
    <table>
        <thead>
            <tr>
                <td>
                    全选
                    <input type="checkbox" v-model="selAll">
                </td>
                <td>图片</td>
                <td>名称</td>
                <td>价格</td>
                <td>数量</td>
                <td>小计</td>
            </tr>
        </thead>
        <tbody>
            <tr v-for="item in shopcartList" :key="item.id">
                <td>
                    <input type="checkbox" v-model="item.isChecked">
                </td>
                <td><img :src="item.pic" alt="" style="width:80px"></td>
                <td>{{ item.name }}</td>
                <td>{{ item.price }}</td>
                <td>
                    <button @click="item.num--">-</button>
                    <span>
                        <input type="text" v-model="item.num" class="inputNum">
                    </span>
                    <button @click="item.num++">+</button>
                </td>
                <td>{{ item.num*item.price }}</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="6">
                    <input type="checkbox" v-model="selAll">
                    {{ totalPrice }}
                </td>
            </tr>
        </tfoot>
    </table>
</template>
<script lang='ts' setup>
    interface ShopcartItemType{
        id:string
        pic:string
        name:string
        price:number
        num:number
        isChecked:boolean
    }
    import {ref,computed} from 'vue'
    const shopcartList=ref<Array<ShopcartItemType>>([
        {
          id: "1001",
          pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Fa9303878-c54d-4712-b3ca-26473144447d%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706758650&t=e9d97e673da7cff6f3052ceb2e56d88c",
          name: "苹果",
          price: 5.8,
          num: 2,
          isChecked: true,
        },
        {
          id: "1002",
          pic: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F2d093cd6-a943-486d-8c62-2a16020a1dae%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1706758650&t=62a04d7403aa4ef7c6fe4445a421af54",
          name: "芒果",
          price: 6.8,
          num: 1,
          isChecked: false,
        },
        {
          id: "1003",
          pic: "https://img1.baidu.com/it/u=1967486422,2850646429&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=707",
          name: "草莓",
          price: 10.8,
          num: 1,
          isChecked: true,
        },
    ])
   const totalPrice=computed(()=>{
    return shopcartList.value.filter(item=>item.isChecked).reduce((prev:number,cur:ShopcartItemType)=>{
        return prev+cur.num*cur.price
    },0)
   })

   const selAll=computed({
     //确定全选按钮是否要勾选，如果所有的项都选中则勾选，如果不是则选中
     get(){
        return shopcartList.value.every((element:ShopcartItemType) => element.isChecked==true)
     },
     //当勾选全选或者反选的时候，决定每一项的勾选是否选中
     set(arg:boolean){
        if(arg){
           shopcartList.value.forEach((element:ShopcartItemType) => {
                element.isChecked=true
           }); 
        }else{
            shopcartList.value.forEach((element:ShopcartItemType) => {
                element.isChecked=false
           }); 
        }
        
     }
   })
  

</script>
<style lang='scss' scoped>
 table{
    width: 800px;
    border-collapse: collapse;
 }
 td{
    text-align: center;
    border: 1px solid #ccc;
 }
 .inputNum{
    width: 30px;
    text-align: center;
 }
</style>